<template>
  <div class="zhiwu-container" :class="timeOfDay">
    <!-- 赛博天体系统 - 固定在左上角 -->
    <div class="celestial-container fixed-position">
      <div class="celestial-body" 
        :class="celestialState.isDaytime ? 'sun' : 'moon'" 
      ></div>
    </div>
    <div class="plant-area">
      <div class="plant" :class="[plantState.stage, plantState.variant]">
        <!-- 植物图像展示区域 -->
        <div v-if="isGeneratingImage" class="plant-generating">
          <div class="loading-spinner"></div>
          <p>植物生长进化中，请耐心等待...</p>
        </div>
        <div v-else-if="plantState.isDead" class="plant-dead">
          <img :src="plantState.imageUrl" alt="植物已死亡" />
        </div>
        <div v-else class="plant-alive" @click="handlePlantClick">
          <!-- 显示生成的植物图像 -->
          <img :src="plantState.imageUrl" :alt="plantState.stage" />
        </div>
      </div>
    </div>

    <div class="interaction-area">
      <div class="status-bar">
        <div class="growth-bar" v-if="plantState.growthValue != 0 ">
          <div class="growth-progress" :style="{ width: `${plantState.growthValue}%` }"></div>
        </div>
        <div class="status-text">
          <span>{{ plantState.name || '植物' }}的生长值: {{ plantState.growthValue }}</span>
          <span>生长阶段: {{ stageName }}</span>
          <span>变异方向: {{ variantName }}</span>
        </div>
      </div>

      <div class="input-area">
        <textarea 
          v-model="userInput" 
          @input="handleInput" 
          placeholder="输入文字喂养植物，好的文字能使植物茁壮成长，反之导致植物变异，输入代码会有意向不到的结果,点击植物可以浇水哦..."
          :disabled="plantState.isDead || isGeneratingImage"
        ></textarea>
        <button 
          class="feed-button" 
          @click="feedPlant" 
          :disabled="!userInput.trim() || isGeneratingImage || plantState.isDead || isFeeding">
          喂养
        </button>
      </div>

      <div class="control-buttons">
        <button @click="resetPlant" v-if="plantState.isDead">重新开始</button>
        <button @click="generateReport" v-if="plantState.stage === 'mature'">植格报告</button>
        <button @click="showFeedingHistory">喂养记录</button>
        <button @click="showPlantHistory">我的植物</button>
      </div>
    </div>

    <!-- 消息提示 -->
    <div class="message-box" v-if="message.show">
      <div class="message-content" :class="message.type">
        {{ message.text }}
      </div>
    </div>

    <!-- 人格报告弹窗 -->
    <div class="report-modal" v-if="showReportModal">
      <div class="report-content">
        <h2>{{ personalityReport.title }}</h2>
        <div class="report-body">
          {{ personalityReport.content }}
        </div>``
        <div class="report-stats">
          <!-- <p>植物名称: {{ plantState.name || '未命名植物' }}</p> -->
          <p>{{ plantState.name }}{{plantState.name ? '的':'' }}生长值: {{ personalityReport.plantState.growthValue }}</p>
          <p>变异类型: {{ getVariantName(personalityReport.plantState.variant) }}</p>
          <p>浇水次数: {{ personalityReport.plantState.waterCount }}</p>
          <p>互动次数: {{ personalityReport.plantState.inputCount }}</p>
        </div>
        <div class="report-actions">
          <button @click="shareReport">分享到朋友圈</button>
          <button @click="closeReport">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 喂养记录弹窗 -->
    <div class="report-modal" v-if="showFeedingHistoryModal">
      <div class="report-content">
        <h2>{{ plantState.name || '植物' }}的喂养记录</h2>
        <div class="feeding-history">
          <div v-if="plantState.feedingHistory && plantState.feedingHistory.length > 0">
            <div v-for="(record, index) in plantState.feedingHistory" :key="index" class="feeding-record">
              <p class="feeding-time">{{ record.time }}</p>
              <p class="feeding-text">{{ record.text }}</p>
              <p class="feeding-growth">生长值 +{{ record.growth }}</p>
            </div>
          </div>
          <div v-else class="empty-history">
            <p>暂无喂养记录</p>
          </div>
        </div>
        <div class="report-actions">
          <button @click="closeFeedingHistory">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 我的植物弹窗 -->
    <div class="report-modal" v-if="showPlantHistoryModal">
      <div class="report-content">
        <h2>我的植物</h2>
        <div class="plant-history">
          <div v-if="plantHistory && plantHistory.length > 0">
            <div v-for="(plant, index) in plantHistory" :key="index" class="plant-record" @click="selectPlant(plant)">
              <div class="plant-record-image">
                <img :src="plant.imageUrl" :alt="plant.name || '植物'" />
              </div>
              <div class="plant-record-info">
                <p class="plant-name">{{ plant.name || '未命名植物' }}</p>
                <p>生长阶段: {{ getStageNameByStage(plant.stage) }}</p>
                <p>变异类型: {{ getVariantName(plant.variant) }}</p>
              </div>
            </div>
          </div>
          <div v-else class="empty-history">
            <p>暂无植物记录</p>
          </div>
        </div>
        <div class="report-actions">
          <button @click="closePlantHistory">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 植物详情弹窗 -->
    <div class="report-modal" v-if="showPlantDetailModal">
      <div class="report-content">
        <h2>{{ selectedPlant.name || '植物' }}的详细信息</h2>
        <div class="plant-detail-image">
          <img :src="selectedPlant.imageUrl" :alt="selectedPlant.name || '植物'" />
        </div>
        <div class="plant-detail-info">
          <p>生长值: {{ selectedPlant.growthValue }}</p>
          <p>生长阶段: {{ getStageNameByStage(selectedPlant.stage) }}</p>
          <p>变异类型: {{ getVariantName(selectedPlant.variant) }}</p>
          <p>浇水次数: {{ selectedPlant.waterCount }}</p>
        </div>
        <div class="tabs">
          <button :class="{ active: activeTab === 'feeding' }" @click="activeTab = 'feeding'">喂养记录</button>
          <button :class="{ active: activeTab === 'report' }" @click="activeTab = 'report'" v-if="selectedPlant.personalityReport">人格报告</button>
        </div>
        <div class="tab-content">
          <div v-if="activeTab === 'feeding'" class="feeding-history">
            <div v-if="selectedPlant.feedingHistory && selectedPlant.feedingHistory.length > 0">
              <div v-for="(record, index) in selectedPlant.feedingHistory" :key="index" class="feeding-record">
                <p class="feeding-time">{{ record.time }}</p>
                <p class="feeding-text">{{ record.text }}</p>
                <p class="feeding-growth">生长值 +{{ record.growth }}</p>
              </div>
            </div>
            <div v-else class="empty-history">
              <p>暂无喂养记录</p>
            </div>
          </div>
          <div v-if="activeTab === 'report' && selectedPlant.personalityReport" class="report-body">
            {{ selectedPlant.personalityReport.content }}
          </div>
        </div>
        <div class="report-actions">
          <button @click="closePlantDetail">返回</button>
        </div>
      </div>
    </div>
    
    <!-- 植物死亡弹窗 -->
    <div class="report-modal" v-if="showDeathModal">
      <div class="report-content death-report">
        <h2>{{ plantState.name || '植物' }}已经死亡</h2>
        <div class="plant-detail-image plant-dead" >
          <img :src="plantState.imageUrl" :alt="plantState.name || '植物'" />
        </div>
        <div class="death-reason">
          <h3>死亡原因:</h3>
          <p>{{ deathReason }}</p>
        </div>
        <div class="report-actions">
          <button @click="resetPlant" class="restart-button">重新开始</button>
          <button @click="closeDeathModal" class="close-button">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PlantService from './plant-service';
import ImageService from './image-service';
import CelestialSystem from './celestial';
import seeding from '@/assets/seeding.png';
export default {
  name: 'ZhiwuGame',
  data() {
    return {
      userInput: '',
      plantState: {
        name: '', // 植物名称
        growthValue: 0,
        stage: 'seedling', // seedling, growing, mature
        variant: 'normal', // normal, dirty, happy, code
        waterCount: 0,
        consecutiveWatering: 0,
        isDead: false,
        inputHistory: [],
        feedingHistory: [], // 喂养记录
        imageUrl: '', // 存储生成的植物图像URL
        personalityReport: null // 存储人格报告
      },
      message: {
        show: false,
        text: '',
        type: 'info' // info, success, warning, error
      },
      stageThresholds: {
        growing: 50,
        mature: 100
      },
      showReportModal: false,
      personalityReport: null,
      isGeneratingImage: false, // 标记是否正在生成图像
      isFeeding: false, // 标记是否正在喂养，防止重复点击
      pendingVariantCheck: false, // 标记是否有待处理的变异检查
      celestialState: {}, // 天体状态
      celestialStyle: {}, // 天体样式
      timeOfDay: 'day', // 白天或黑夜
      celestialInterval: null, // 天体更新定时器
      
      // 新增数据
      showFeedingHistoryModal: false, // 显示喂养记录弹窗
      showPlantHistoryModal: false, // 显示植物历史弹窗
      showPlantDetailModal: false, // 显示植物详情弹窗
      showDeathModal: false, // 显示植物死亡弹窗
      deathReason: '', // 植物死亡原因
      plantHistory: [], // 植物历史记录
      selectedPlant: null, // 选中的植物
      activeTab: 'feeding' // 当前激活的标签页
    };
  },
  computed: {
    stageName() {
      return this.getStageNameByStage(this.plantState.stage);
    },
    variantName() {
      return this.getVariantName(this.plantState.variant);
    }
  },
  async created() {
    // 从localStorage加载植物状态
    this.loadPlantState();
    // 如果没有图像URL，生成初始图像
    if (!this.plantState.imageUrl) {
      this.generatePlantImage('赠送您一株赛博植物');
    }

    // 加载植物历史记录
    this.loadPlantHistory();
    
    // 如果是新植物且没有名字，先生成植物名称
    if (!this.plantState.name) {
      await this.generatePlantName();
    }
    
    
  },
  
  mounted() {
    // 初始化天体系统
    this.updateCelestial();
    
    // 设置定时器，每分钟更新天体状态
    // this.celestialInterval = setInterval(() => {
    //   this.updateCelestial();
    // }, 10000); // 10秒更新一次，方便测试
  },
  beforeDestroy() {
    // 清除定时器
    // if (this.celestialInterval) {
    //   clearInterval(this.celestialInterval);
    // }
  },
  methods: {
    //更新天体状态
    updateCelestial() {
      this.celestialState = CelestialSystem.getCelestialState();
      this.timeOfDay = this.celestialState.isDaytime ? 'day' : 'night';
    },
    
    // 处理用户输入
    handleInput() {
      if (this.plantState.isDead || this.isGeneratingImage) return;
      
      // 标记需要检查变异
      this.pendingVariantCheck = true;
    },
    
    // 喂养植物（用户点击喂养按钮）
    async feedPlant() {
      if (this.plantState.isDead || this.isGeneratingImage || !this.userInput.trim() || this.isFeeding) return;
      
      // 设置喂养状态，防止重复点击
      this.isFeeding = true;
      
      try {
        // 增加生长值（根据输入文本长度）
        const growthIncrease = Math.min(this.userInput.length, 20); // 限制最大增长值
        this.plantState.growthValue += growthIncrease;
        
        // 记录输入历史
        this.plantState.inputHistory.push(this.userInput);
        
        // 记录喂养历史
        const now = new Date();
        const timeString = now.toLocaleString();
        this.plantState.feedingHistory = this.plantState.feedingHistory || [];
        this.plantState.feedingHistory.push({
          text: this.userInput,
          growth: growthIncrease,
          time: timeString
        });
        
        // 检查植物阶段
        const stageChanged = this.checkPlantStage();
        
        // 检查植物变异
        if (!this.plantState.isDead) {
          const variantChanged = await this.checkPlantVariant();
        }
        
        // 生成植物图像
        this.generatePlantImage();
        
        // 显示喂养成功消息
        this.showMessage(`喂养成功！植物生长值 +${growthIncrease}`, 'success');
        
        // 清空输入框
        this.userInput = '';
        
        // 重置变异检查标记
        this.pendingVariantCheck = false;
        
        // 保存状态
        this.savePlantState();
      } finally {
        // 无论成功失败，都恢复按钮状态
        this.isFeeding = false;
      }
    },
    
    // 处理浇水（空格键）
    handleWatering(event) {
      if (this.plantState.isDead || this.isGeneratingImage) return;
      
      // event.preventDefault(); // 阻止空格键默认行为
      this.waterPlant();
    },
    
    // 处理植物点击
    handlePlantClick() {
      if (this.plantState.isDead || this.isGeneratingImage) return;
      
      this.waterPlant();
    },
    
    // 浇水逻辑
    waterPlant() {
      if (this.plantState.isDead || this.isGeneratingImage) return;
      
      // 增加生长值
      this.plantState.growthValue += 5;
      
      // 增加连续浇水次数
      this.plantState.consecutiveWatering += 1;
      this.plantState.waterCount += 1;
      
      // 检查是否浇水过多
      if (this.plantState.consecutiveWatering >= 5) {
        this.killPlant('浇水过多，植物根部腐烂，无法吸收养分而死亡');
        return;
      }
      
      // 显示浇水消息
      this.showMessage('浇水成功！植物生长值 +5', 'info');
      
      // 检查植物阶段
      const stageChanged = this.checkPlantStage();
      
       // 如果阶段发生变化且植物没有死亡，重新生成植物图像
       if (stageChanged && !this.plantState.isDead) {
        this.generatePlantImage();
      }
      
      // 保存状态
      this.savePlantState();
      
      // 60秒后重置连续浇水计数
      setTimeout(() => {
        this.plantState.consecutiveWatering = 0;
      }, 60*1000);
    },
    
    // 检查植物阶段
    checkPlantStage() {
      const prevStage = this.plantState.stage;
      
      if (this.plantState.growthValue >= this.stageThresholds.mature) {
        this.plantState.stage = 'mature';
      } else if (this.plantState.growthValue >= this.stageThresholds.growing) {
        this.plantState.stage = 'growing';
      } else {
        this.plantState.stage = 'seedling';
      }
      
      // 如果阶段发生变化
      if (prevStage !== this.plantState.stage) {
        if (this.plantState.stage === 'mature') {
          // 调用大模型生成成熟期消息
          this.generateMatureMessage();
        } else if (this.plantState.stage === 'growing') {
          this.showMessage('你的植物进入了成长期！', 'info');
        }
        return true;
      }
      
      return false;
    },
    
    // 生成成熟期消息
    async generateMatureMessage() {
      try {
        const matureMessage = await PlantService.generateMatureMessage(this.plantState);
        this.showMessage(matureMessage, 'success');
      } catch (error) {
        console.error('生成成熟期消息失败:', error);
        this.showMessage('恭喜！你的植物已经成熟了！感谢你的精心照料！', 'success');
      }
    },
    
    // 检查植物变异
    async checkPlantVariant() {
      // 获取最新的输入内容
      const latestInput = this.userInput;
      
      if (!latestInput || latestInput.trim() === '') return false;
      
      try {
        // 调用大模型接口判断变异类型
        const variantType = await PlantService.analyzeTextWithLLM(latestInput);
        
        // 根据返回结果设置变异类型
        if (variantType !== this.plantState.variant) {
          this.plantState.variant = variantType;
          
          const variantMessages = {
            normal: '植物恢复了正常状态。',
            dirty: '植物感受到了负面情绪，长出了尖刺！',
            happy: '植物感受到了幸福，变得更加美丽！',
            code: '植物检测到代码，结出了二进制果实！'
          };
          
          this.showMessage(variantMessages[variantType], 'info');
          return true;
        }
      } catch (error) {
        console.error('分析文本失败:', error);
      }
      
      return false;
    },
    
    // 生成植物图像
    async generatePlantImage(message) {
      if (this.isGeneratingImage) return;
      
      this.isGeneratingImage = true;
      if (message !== '' && message !== undefined){
        this.showMessage(message + ',请耐心等待...', 'info');
      }else{
        this.showMessage('植物生长进化中，请耐心等待...', 'info');
      }
      
      try {
        // 如果没有植物名称，先生成名称
        if (!this.plantState.name) {
          await this.generatePlantName();
        }
        
        // 调用图像服务生成植物图像
        const imageUrl = await ImageService.generatePlantImage(this.plantState, this.userInput);
        
        // 更新植物图像URL
        this.plantState.imageUrl = imageUrl;
        
        // 保存状态
        this.savePlantState();
        
        // 根据植物状态显示不同消息
        if (this.plantState.isDead) {
          this.showMessage(`${this.plantState.name}已经死亡`, 'error');
        } else {
          this.showMessage(`${this.plantState.name}生长完成！`, 'success');
        }
      } catch (error) {
        console.error('生成植物图像失败:', error);
        this.showMessage('生成植物图像失败，请稍后再试', 'error');
        
        // 如果生成图像失败且植物已死亡，使用默认死亡图像
        if (this.plantState.isDead && !this.plantState.imageUrl) {
          // 设置一个默认的死亡植物图像URL（可以是本地图像）
          this.plantState.imageUrl = '';
          this.savePlantState();
        }
      } finally {
        this.isGeneratingImage = false;
      }
    },
    
    // 获取变异类型的中文名称
    getVariantName(variant) {
      return PlantService.getVariantName(variant);
    },
    
    // 杀死植物
    async killPlant(reason) {
      this.plantState.isDead = true;
      
      // 设置死亡原因
      this.deathReason = `${reason}`;
      
      // 先保存状态，确保isDead状态被记录
      this.savePlantState();

      // 生成死亡植物图像
      try {
        await this.generatePlantImage();
      } catch (error) {
        console.error('生成死亡植物图像失败:', error);
        // 如果生成图像失败，使用默认死亡图像
        this.plantState.imageUrl = '';
        this.savePlantState();
      }

      // 显示死亡弹窗
      this.showDeathModal = true;
    },
    
    // 关闭死亡弹窗
    closeDeathModal() {
      this.showDeathModal = false;
    },
    
    // 重置植物
    async resetPlant() {
      // 保存当前植物到历史记录
      if (this.plantState.imageUrl) {
        this.savePlantToHistory(this.plantState);
      }
      
      // 创建新植物
      this.plantState = {
        name: '', // 将在下面生成
        growthValue: 0,
        stage: 'seedling',
        variant: 'normal',
        waterCount: 0,
        consecutiveWatering: 0,
        isDead: false,
        inputHistory: [],
        feedingHistory: [],
        // 设置默认幼苗图片
        imageUrl: `${seeding}`,
        personalityReport: null
      };
      this.userInput = '';
      this.showMessage('新的植物已种下，开始你的养成之旅吧！', 'success');
      
      // 关闭死亡弹窗
      this.showDeathModal = false;
      
      // 先生成植物名称，等待完成
      await this.generatePlantName();
      
      // 保存状态
      this.savePlantState();
      
      // 稍后再生成真正的植物图像
      setTimeout(() => {
        this.generatePlantImage();
      }, 10);
    },
    
    // 生成人格报告
    async generateReport() {
      // 如果已经有人格报告，直接显示
      if (this.plantState.personalityReport) {
        this.personalityReport = this.plantState.personalityReport;
        this.showReportModal = true;
        return;
      }
      
      // 调用大模型生成人格报告
      try {
        this.personalityReport = await PlantService.generatePersonalityReport(this.plantState);
        
        // 保存人格报告到植物状态
        this.plantState.personalityReport = this.personalityReport;
        this.savePlantState();
        
        this.showReportModal = true;
      } catch (error) {
        console.error('生成人格报告失败:', error);
        this.showMessage('生成人格报告失败，请稍后再试', 'error');
      }
    },
    
    // 分享报告到朋友圈
    shareReport() {
      // 这里可以实现分享功能，例如生成图片或调用微信分享API
      alert('分享功能正在开发中...');
    },
    
    // 关闭报告弹窗
    closeReport() {
      this.showReportModal = false;
    },
    
    // 显示消息
    showMessage(text, type = 'info') {
      this.message = {
        show: true,
        text,
        type
      };
      
      // 3秒后自动隐藏消息
      setTimeout(() => {
        this.message.show = false;
      }, 3000);
    },
    
    // 保存植物状态到localStorage
    savePlantState() {
      localStorage.setItem('zhiwuPlantState', JSON.stringify(this.plantState));
    },
    
    // 从localStorage加载植物状态
    loadPlantState() {
      const savedState = localStorage.getItem('zhiwuPlantState');
      if (savedState) {
        try {
          this.plantState = JSON.parse(savedState);
          // 确保feedingHistory存在
          if (!this.plantState.feedingHistory) {
            this.plantState.feedingHistory = [];
          }
          
          // 如果植物已死亡但没有图像URL，设置默认死亡图像
          if (this.plantState.isDead && !this.plantState.imageUrl) {
            this.plantState.imageUrl = '';
            this.savePlantState();
          }
        } catch (error) {
          console.error('加载植物状态失败:', error);
          this.resetPlant();
        }
      }
    },
    
    // 保存植物到历史记录
    savePlantToHistory(plant) {
      // 只保存非空的植物
      if (!plant || !plant.imageUrl) return;
      
      // 加载现有历史记录
      const history = this.loadPlantHistoryFromStorage();
      
      // 添加当前植物到历史记录
      const plantToSave = JSON.parse(JSON.stringify(plant)); // 深拷贝
      
      // 检查是否已存在相同ID的植物，如果存在则更新
      const existingIndex = history.findIndex(p => p.id === plantToSave.id);
      if (existingIndex >= 0) {
        history[existingIndex] = plantToSave;
      } else {
        // 为植物添加唯一ID
        plantToSave.id = Date.now().toString();
        history.push(plantToSave);
      }
      
      // 保存更新后的历史记录
      localStorage.setItem('zhiwuPlantHistory', JSON.stringify(history));
      
      // 更新内存中的历史记录
      this.plantHistory = history;
    },
    
    // 从localStorage加载植物历史记录
    loadPlantHistory() {
      this.plantHistory = this.loadPlantHistoryFromStorage();
    },
    
    // 从localStorage获取植物历史记录
    loadPlantHistoryFromStorage() {
      const savedHistory = localStorage.getItem('zhiwuPlantHistory');
      if (savedHistory) {
        try {
          return JSON.parse(savedHistory);
        } catch (error) {
          console.error('加载植物历史记录失败:', error);
          return [];
        }
      }
      return [];
    },
    
    // 显示喂养记录
    showFeedingHistory() {
      this.showFeedingHistoryModal = true;
    },
    
    // 关闭喂养记录
    closeFeedingHistory() {
      this.showFeedingHistoryModal = false;
    },
    
    // 显示植物历史
    showPlantHistory() {
      this.showPlantHistoryModal = true;
    },
    
    // 关闭植物历史
    closePlantHistory() {
      this.showPlantHistoryModal = false;
    },
    
    // 选择植物
    selectPlant(plant) {
      this.selectedPlant = plant;
      this.activeTab = 'feeding';
      this.showPlantHistoryModal = false;
      this.showPlantDetailModal = true;
    },
    
    // 关闭植物详情
    closePlantDetail() {
      this.showPlantDetailModal = false;
      this.showPlantHistoryModal = true;
    },
    
    // 获取阶段名称
    getStageNameByStage(stage) {
      const stageNames = {
        seedling: '幼苗期',
        growing: '成长期',
        mature: '成熟期'
      };
      return stageNames[stage] || '未知阶段';
    },
    
    // 生成植物名称
    async generatePlantName() {
      if (this.plantState.name) return this.plantState.name; // 如果已有名字，直接返回
      
      try {
        const name = await PlantService.generatePlantName();
        this.plantState.name = name;
        this.savePlantState();
        return name;
      } catch (error) {
        console.error('生成植物名称失败:', error);
        // 使用默认名称
        const defaultName = this.getDefaultPlantName();
        this.plantState.name = defaultName;
        this.savePlantState();
        return defaultName;
      }
    },
    
    // 获取默认植物名称
    getDefaultPlantName() {
      const names = ['豆豆', '苗苗', '绿绿', '叶子', '花花', '草草', '小芽'];
      return names[Math.floor(Math.random() * names.length)];
    }
  }
};
</script>

<style scoped>
.zhiwu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  transition: background-color 1s ease;
  overflow: hidden;
}

/* 白天/黑夜主题 */
.zhiwu-container.day {
  background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
  color: #333;
}

.zhiwu-container.night {
  background: linear-gradient(to bottom, #0F2027, #203A43, #2C5364);
  color: #f0f0f0;
}

/* 赛博天体系统 */
.celestial-system {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.celestial-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.celestial-container.fixed-position {
  width: auto;
  height: auto;
}

.celestial-body {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transition: all 1s ease;
  z-index: 10000;
}

.fixed-position .celestial-body {
  position: fixed;
  top: 20px;
  left: 20px;
}

.celestial-body.sun {
  background: radial-gradient(circle, #FFD700, #FFA500);
  box-shadow: 0 0 30px 10px rgba(255, 200, 0, 0.7);
  border: 3px solid rgba(255, 165, 0, 0.8);
  filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.8));
}

.celestial-body.moon {
  background: radial-gradient(circle, #F5F5F5, #E0E0E0);
  box-shadow: 0 0 20px 5px rgba(200, 200, 255, 0.5);
  border: 3px solid rgba(200, 200, 255, 0.8);
  filter: drop-shadow(0 0 10px rgba(200, 200, 255, 0.6));
}

.plant-area {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  /*background-color: rgba(232, 245, 233, 0.8);*/
  border-radius: 10px;
  position: relative;
  z-index: 2; /* 确保低于天体系统 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  /*border: 1px solid rgba(255, 255, 255, 0.2);*/
  margin-top: 60px;
}

.plant {
  width: 200px;
  height: 200px;
  position: relative;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plant img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.5s ease;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.plant-dead img {
  filter: grayscale(100%);
  opacity: 0.7;
}

.plant-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #4caf50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.interaction-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  z-index: 2; /* 确保低于天体系统 */
  position: relative;
}

.status-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.growth-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

.growth-progress {
  height: 100%;
  background: linear-gradient(to right, #4caf50, #8bc34a);
  transition: width 0.3s ease;
}

.status-text {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #616161;
  font-weight: 500;
}

.input-area {
  width: 100%;
  position: relative;
}

.input-area textarea {
  width: 90%;
  height: 100px;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  resize: none;
  font-size: 16px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.input-area textarea:focus {
  outline: none;
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.feed-button {
  display: block;
  width: 100%;
  padding: 15px;
  background: linear-gradient(to right, #4caf50, #8bc34a);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feed-button:hover {
  background: linear-gradient(to right, #43a047, #7cb342);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.feed-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.feed-button:disabled {
  background: linear-gradient(to right, #cccccc, #dddddd);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.control-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.control-buttons button {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.control-buttons button:hover {
  background-color: #1976d2;
  transform: translateY(-2px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}

.control-buttons button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.control-buttons button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.message-box {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  z-index: 9000; /* 高于大多数元素，但低于天体系统 */
  animation: fadeIn 0.3s, fadeOut 0.3s 2.7s;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.message-content {
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 500;
}

.message-content.info {
  background: linear-gradient(to right, #2196f3, #03a9f4);
}

.message-content.success {
  background: linear-gradient(to right, #4caf50, #8bc34a);
}

.message-content.warning {
  background: linear-gradient(to right, #ff9800, #ffb74d);
}

.message-content.error {
  background: linear-gradient(to right, #f44336, #e57373);
}

/* 人格报告弹窗样式 */
.report-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9500; /* 高于消息框，但低于天体系统 */
  backdrop-filter: blur(5px);
}

/* 喂养记录样式 */
.feeding-history {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.feeding-record {
  background-color: #f5f5f5;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  border-left: 4px solid #4caf50;
}

.feeding-time {
  font-size: 12px;
  color: #757575;
  margin-bottom: 5px;
}

.feeding-text {
  font-size: 14px;
  margin-bottom: 5px;
  color: #0F2027;
}

.feeding-growth {
  font-size: 12px;
  color: #4caf50;
  font-weight: bold;
}

/* 植物历史样式 */
.plant-history {
  max-height: 400px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.plant-record {
  background-color: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.plant-record:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.plant-record-image {
  height: 120px;
  overflow: hidden;
}

.plant-record-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plant-record-info {
  padding: 10px;
  color: #0F2027;
}

.plant-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
  color: #4caf50;
}

.empty-history {
  text-align: center;
  padding: 20px;
  color: #757575;
}

/* 植物详情样式 */
.plant-detail-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 10px;
}

.plant-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plant-detail-info {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  color: #0F2027;
}

.tabs {
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.tabs button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #757575;
  position: relative;
}

.tabs button.active {
  color: #4caf50;
  font-weight: bold;
}

.tabs button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4caf50;
}

.report-content {
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  max-width: 80%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.5s ease;
}

@keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.report-content h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #4caf50;
  font-size: 24px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
}

.report-body {
  margin-bottom: 20px;
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}

.report-stats {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.report-stats p {
  margin: 8px 0;
  font-size: 14px;
  color: #616161;
}

.report-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.report-actions button {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(to right, #4caf50, #8bc34a);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.report-actions button:hover {
  background: linear-gradient(to right, #43a047, #7cb342);
  transform: translateY(-2px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
}

/* 植物死亡弹窗样式 */
.death-report {
  text-align: center;
}

.death-report h2 {
  color: #f44336;
}

.death-reason {
  background-color: #ffebee;
  padding: 15px;
  border-radius: 10px;
  margin: 15px 0;
  border-left: 4px solid #f44336;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  color: #0F2027;
}

.death-reason h3 {
  margin-top: 0;
  color: #d32f2f;
  font-size: 18px;
  margin-bottom: 10px;
}

.restart-button {
  background: linear-gradient(to right, #f44336, #ff7043) !important;
  font-size: 18px !important;
  padding: 15px 30px !important;
}

.restart-button:hover {
  background: linear-gradient(to right, #d32f2f, #f4511e) !important;
}

.close-button {
  background: linear-gradient(to right, #757575, #9e9e9e) !important;
  font-size: 16px !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 响应式设计 */
@media (max-width: 600px) {
  .zhiwu-container {
    padding: 10px;
  }
  
  .plant-area {
    height: 200px;
  }
  
  .plant {
    width: 150px;
    height: 150px;
  }
  
  .status-text {
    flex-direction: column;
    align-items: center;
  }
  
  .report-content {
    max-width: 95%;
    padding: 20px;
    width: 85%;
  }
  
  .celestial-body {
    width: 40px;
    height: 40px;
  }
}
</style>